<template>
  <div class="pay">
    <Title></Title>
    <div class="pay_box">
      <div class="inner">
        <div class="pay_list">
          <div class="pay_item" @click="payfn">
            <img src="../../assets/balance.png" alt="" srcset="">
            余额支付
          </div>
          <div class="pay_item" @click="WechatPayFun">
            <img src="../../assets/pay.png" alt="" srcset="">
            微信支付
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {payorderapi, WechatPayFun} from "../../api/http.js"
  import Title from "../../components/title.vue"
  export default {
    name: 'pay',
    components: {
      Title
    },
    methods:{
     async payfn(){
       const res = await payorderapi({order_id:this.$route.query.order_id})
       console.log(res);return false;
       if (res.data.code == 200) {
        this.$message(res.data.msg)
        this.$router.push({
          path:"/layout/meorder",
        })
       } else if(res.data.code == 400){
         this.$router.push({
           path:"/layout/balance",
         })
         this.$message(res.data.msg)
       }else{
         this.$message(res.data.msg)
       }
      },
      async WechatPayFun(){
        const res = await WechatPayFun({user_order_id:this.$route.query.order_id})

        if (res.data.code == 200) {
          this.$message(res.data.msg)
          console.log(res.data.data);
          localStorage.setItem('wechat_pay_data', JSON.stringify(res.data.data))
          this.$router.push({
            path:"/wechatPay",
          })
        } else if(res.data.code == 400){
          this.$router.push({
            path:"/layout/balance",
          })
          this.$message(res.data.msg)
        }else{
          this.$message(res.data.msg)
        }
      }
    }
  }
</script>

<style lang="less">
  .pay_box {
    width: 100%;
    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 10px 85px;
      .pay_list{
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .pay_item{
          width: 200px;
          height: 50px;
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
          align-items: center;
          border-radius: 10px;
          border:1px solid #ccc;
          img{
            width: 30px;
            height: 30px;
            margin-right: 20px;
          }
        }
      }
      }
    }

</style>
